<template>
  <view class="subpage-container">
    <!-- 顶部标题 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <text class="iconfont icon-back"></text>
      </view>
      <text class="title">管理员征召</text>
      <view class="placeholder"></view>
    </view>
    
    <!-- 页面内容 -->
    <view class="content">
      <view class="admin-info">
        <view class="info-card">
          <view class="card-title">管理员申请条件</view>
          <view class="card-content">
            <view class="condition-item">
              <text class="dot"></text>
              <text class="condition-text">已注册飞蛐APP超过180天</text>
            </view>
            <view class="condition-item">
              <text class="dot"></text>
              <text class="condition-text">保持良好的社区行为记录</text>
            </view>
            <view class="condition-item">
              <text class="dot"></text>
              <text class="condition-text">有充足的时间参与社区管理工作</text>
            </view>
            <view class="condition-item">
              <text class="dot"></text>
              <text class="condition-text">熟悉飞蛐APP的功能和社区规则</text>
            </view>
          </view>
        </view>
        
        <view class="info-card">
          <view class="card-title">管理员职责</view>
          <view class="card-content">
            <view class="condition-item">
              <text class="dot"></text>
              <text class="condition-text">审核社区内容，保持社区健康发展</text>
            </view>
            <view class="condition-item">
              <text class="dot"></text>
              <text class="condition-text">处理用户举报和投诉</text>
            </view>
            <view class="condition-item">
              <text class="dot"></text>
              <text class="condition-text">参与社区活动的组织和策划</text>
            </view>
            <view class="condition-item">
              <text class="dot"></text>
              <text class="condition-text">配合平台进行其他管理工作</text>
            </view>
          </view>
        </view>
        
        <button class="apply-btn" @click="applyForAdmin">申请成为管理员</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isQualified: false
    };
  },
  created() {
    // 模拟检查用户是否符合申请条件
    this.checkQualification();
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    checkQualification() {
      // 模拟检查用户是否符合申请条件的逻辑
      // 这里假设用户已加入超过560天，符合条件
      this.isQualified = true;
    },
    applyForAdmin() {
      if (!this.isQualified) {
        uni.showToast({
          title: '您暂不符合申请条件',
          icon: 'none'
        });
        return;
      }
      
      uni.showModal({
        title: '申请确认',
        content: '确定要申请成为管理员吗？我们会在3-5个工作日内审核您的申请',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '提交中...'
            });
            
            // 模拟提交申请
            setTimeout(() => {
              uni.hideLoading();
              uni.showToast({
                title: '申请已提交',
                icon: 'success'
              });
            }, 1000);
          }
        }
      });
    }
  }
};
</script>

<style lang="scss">
.subpage-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  padding: 0 30rpx;
  position: relative;
}

.back-btn {
  font-size: 40rpx;
  color: #333;
  width: 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: 500;
}

.placeholder {
  width: 40rpx;
}

.content {
  padding: 30rpx;
}

.admin-info {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.info-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
}

.card-title {
  font-size: 32rpx;
  font-weight: 500;
  margin-bottom: 20rpx;
  color: #333;
}

.card-content {
  padding-left: 10rpx;
}

.condition-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15rpx;
}

.dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background-color: #1989fa;
  margin-top: 12rpx;
  margin-right: 15rpx;
}

.condition-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.apply-btn {
  margin-top: 30rpx;
  width: 100%;
  height: 80rpx;
  background-color: #1989fa;
  color: #fff;
  border-radius: 8rpx;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style> 